<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年10月25日 06:36:56
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class>
    <!-- 标签页 -->
    <div>
      {{activeName}}
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单"></el-tab-pane>
        <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
        <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
        <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
        <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
        <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
        <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="150"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="120">
          <template slot-scope="scope">
            {{moment(scope.row.orderTime).format('YYYY-MM-DD :HH:mm:ss')}}
          </template>
          <!-- <template
            slot-scope="scope"
          >{{moment(scope.row.orderTime).format('YYYY-MM-DD :HH:mm:SS')}}</template> -->
        </el-table-column>
        <el-table-column prop="total" label="总价" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="120"></el-table-column>
        <el-table-column prop="customerId" label="顾客ID " width="280"></el-table-column>
        <el-table-column
          prop="employeeId"
          label="员工ID"
          width="320"
          v-if="this.activeName!=='待支付'&&this.activeName!=='待派单'"
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click='toDetails(scope.row.id)'>详情</el-button>
            <el-button
              type="text"
              size="small"
              @click="toCancle(scope.row.id)"
              v-if="scope.row.status==='待接单'"
            >取消派单</el-button>
            <el-button
              type="text"
              size="small"
              @click="toSend(scope.row.id)"
              v-if="scope.row.status==='待派单'"
            >派单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog  :visible.sync="visible" width="30%" >
        {{form}}
        <div v-for='r in category' :key='r.id'>
            <el-radio v-model="form.waiterId" :label="r.id" border>{{ r.username }}{{ r.realname }}</el-radio>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 2.引入momentjs对象
let moment=require('moment');
import { pageQuery, cancelSendOrder, confirmOrder } from "@/api/order";
import {roles} from "@/utils/config";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      activeName: "所有订单",
      tableData: [],
      total: 0,
      visible:false,
      category:[],
      form:{

      },
      params: {
        page: 1,
        pageSize: 10
      }
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 3.挂载moment
    // 跳转到详情页
    toDetails(id){
      this.$router.push({
        path:'/details/index',
        query:{
          id,
        }
      })
    },
      // toDetails(id){
      //     this.$router.push({
      //         path:'/details/index',query:{
      //             id
      //         }
      //     })
      // },
    async toCancle(id) {
      let res = await cancelSendOrder({ orderId: id });
      this.$message({
        showClose: true,
        message: res.message,
        type: "success"
      });
      this.handleClick();
    },
    async toSend(id) {
      let res = await pageQuery({
        page: 1,
        pageSize: 10,
        roleId: roles.waiter
      });
      console.log(res)
      this.category=res.data.list;
      this.form.orderId=id;
      this.visible=true
    },
    moment,
    async handleClick() {
      let temp = {
        ...this.params
      };
      if (this.activeName !== "所有订单") {
        temp.status = this.activeName;
      }
      let res = await pageQuery(temp);
      console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.pageQuery();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.handleClick();
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.handleClick();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
